<template>
	<view id="map-wrapper">
		<!-- <u-tabs :list="list1"></u-tabs> -->
		<!-- 		<view class="zs">
			<image class="zs-img" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/static/images/ycyj.png"></image>
		</view> -->
		<map class="map" id="map" :latitude="lat" :longitude="lng" scale="10" :markers="markers" @markertap="onMarkers">
			<cover-view slot="callout">
				<block v-for="(item,index) in markers" :key="index">
					<cover-view class="customCallout" :marker-id="item.id">
						<cover-view class="content">
							{{item.title}}
						</cover-view>
					</cover-view>
				</block>
			</cover-view>
		</map>
		<view v-if="detailVisible" class="project-mask">
			<view class="project-content">
				<view class="project-info">
					<view class="info" @click="toDetail(projectDetail.project.id)">
						<view class="project-name">{{projectDetail.project.projectName}}</view>
						<view class="project-address" v-if="projectDetail.project.projectAddress">{{projectDetail.project.projectAddress}}</view>
					</view>
					<u-line length="70" direction="col"></u-line>
					<view class="btn">
						<view class="link" @click="goMap">导航</view>
					</view>
				</view>
				<view class="project-time">
					{{projectDetail.timestu}} 实时数据
				</view>
				<view class="project-zs" v-if="projectDetail.info">
					<u-grid col="4">
						<u-grid-item>
							<u-tag :bgColor="PMWarningBars['pm10'].filter(projectDetail.info.pm10)"
								:borderColor="PMWarningBars['pm10'].filter(projectDetail.info.pm10)" :text="projectDetail.info.pm10" size="mini">
							</u-tag>
							<view>PM10</view>
						</u-grid-item>
						<u-grid-item>
							<u-tag :bgColor="PMWarningBars['pm25'].filter(projectDetail.info.pm25)"
								:borderColor="PMWarningBars['pm25'].filter(projectDetail.info.pm25)" :text="projectDetail.info.pm25" size="mini">
							</u-tag>
							<view>PM2.5</view>
						</u-grid-item>
						<u-grid-item>
							<view class="text1">{{projectDetail.info.tsp}}</view>
							<view>TSP</view>
						</u-grid-item>
						<u-grid-item>
							<u-tag :bgColor="NoiseWarningBars['noise'].filter(projectDetail.info.noise)"
								:borderColor="NoiseWarningBars['noise'].filter(projectDetail.info.noise)" :text="projectDetail.info.noise" size="mini">
							</u-tag>
							<view>噪声</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deviceInfo,
		getChildren
	} from '@/api/global'
	import {
		getSiteList
	} from '@/api/map'
	import {
		AREA_ID
	} from '@/store/mutaction-types'
	import {
		PMWarningBars,
		NoiseWarningBars
	} from '@/utils/common.js'
	
	export default {
		data() {
			return {
				list1: [
					{
						name: 'PM10'
					},
					{
						name: 'PM2.5'
					}
				],
				// 外部函数
				PMWarningBars,
				NoiseWarningBars,
				queryParam: {
					searchScope: '1,2',
					searchField: 'pm10',
					deviceTypes: 1
				},
				lat: Number(34.2739),
				lng: Number(117.15881),
				map: null,
				markers: [],
				controls: [],
				detailVisible: false,
				areaId: uni.getStorageSync(AREA_ID),
				projectDetail: {},
				currentTime: ''
			}
		},
		mounted() {
			this.getAllSite()
		},
		methods: {
			getAllSite() {
				uni.showLoading({
					title: '加载中'
				})
				const app = this
				const areaIds = []
				let query = ''
				getChildren(app.areaId).then(areas => {
					const ids = areas.data.data
					for (const k in ids) {
						areaIds.push(ids[k].id)
					}
					this.areaIds = areaIds.join(',')
					for (const k in app.queryParam) {
						query += `&${k}=${app.queryParam[k]}`
					}
					getSiteList(this.areaIds, query).then(res => {
						const rows = res.data.rows
						const markers = []
						for (const k in rows) {
							const obj = {}
							obj['id'] = rows[k].id
							obj['deviceNo'] = rows[k].deviceNo
							obj['latitude'] = rows[k].lat
							obj['longitude'] = rows[k].lng
							obj['joinCluster'] = true
							obj['width'] = 40
							obj['height'] = 40
							if (rows[k].onlineStatus === '0') {
								obj['iconPath'] = 'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/pos2.png'
								// if (rows[k].num >= 0 && rows[k].num < 50) {
								// 	obj['iconPath'] = 'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/two_icon1.png'
								// } else if (rows[k].num >= 50 && rows[k].num < 100) {
								// 	obj['iconPath'] = 'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/two_icon2.png'
								// } else if (rows[k].num >= 100 && rows[k].num < 150) {
								// 	obj['iconPath'] = 'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/two_icon3.png'
								// } else if (rows[k].num >= 150 && rows[k].num < 200) {
								// 	obj['iconPath'] = 'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/two_icon4.png'
								// } else if (rows[k].num >= 200 && rows[k].num < 300) {
								// 	obj['iconPath'] = 'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/two_icon5.png'
								// } else if (rows[k].num > 300) {
								// 	obj['iconPath'] = 'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/two_icon6.png'
								// }
							} else {
								obj['iconPath'] =
									'https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/pos1.png'
							}
							markers.push(obj)
						}
						this.map = uni.createMapContext('map', this)
						this.markers = markers
					}).finally(() => {
						setTimeout(() => {
							uni.hideLoading()
						}, 1000)
					})
				})
			},
			onMarkers(e) {
				uni.showLoading({
					title: '加载中'
				})
				for (const k in this.markers) {
					if (this.markers[k].id === e.markerId) {
						deviceInfo(this.markers[k].deviceNo).then(res => {
							if (res.data.code === 200) {
								this.projectDetail = res.data.data
								this.lat = this.projectDetail.project.latitude
								this.lng = this.projectDetail.project.longitude
								this.projectDetail.timestu = uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss')
							} else {
								uni.$u.toast('查询失败，稍后再试')
							}
						}).finally(() => {
							uni.hideLoading()
							this.detailVisible = true
						})
					}
				}
			},
			goMap() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						const latitude = Number(this.projectDetail.project.latitude)
						const longitude = Number(this.projectDetail.project.longitude)
						console.log(latitude)
						console.log(longitude)
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: res => {
								console.log(res)
							}
						})
					}
				})
			},
			toDetail (id) {
				if (id) {
					uni.navigateTo({
						url: '/packageE/project-info/projectinfo?projectId=' + id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	#map-wrapper {
		width: 100%;
		height: 100vh;

		.zs-img {
			width: 100%;
			height: 30px;
		}

		#map {
			width: 100%;
			height: 100vh;
		}

		.project-mask {
			z-index: 999;
			position: fixed;
			left: 0;
			bottom: 10upx;
			width: 96%;
			padding: 0 2%;

			.project-content {
				background-color: #fff;
				border-radius: 10upx;

				.project-info {
					padding: 20upx 40upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.info {
						widht: 70%;

						.project-name {
							color: $uni-color-title;
							font-size: $uni-font-size-title;
						}

						.project-address {
							color: $u-info;
							white-space: pre-wrap;
						}
					}

					.btn {
						text-align: center;
						width: 30%;

						.link {
							color: $u-primary
						}
					}
				}

				.project-time {
					text-align: center;
					color: $u-primary;
					font-size: 24upx;
					padding: 10upx 40upx;
					background-color: $u-primary-light;
				}

				.project-zs {
					padding: 20upx 0;

					.text1 {
						font-size: $uni-font-size-title;
						color: $u-primary;
					}
				}
			}
		}
	}
</style>
